<template>
  <div class="jobsAreaPage">
    <div class="left">
      <el-card>
        <el-tree
          icon-class=" "
          :data="treeData"
          node-key="id"
          :default-checked-keys="['1024985257948084801']"
          :props="defaultProps"
          @node-click="handleNodeClick"
          :highlight-current="true"
          :default-expanded-keys="defaultKeys"
        >
          <span slot-scope="{ node, data }">
            <template>
              <i
                :class="{
                  'el-icon-folder-add': !node.expanded && data.type !== 3,
                  'el-icon-folder-remove': node.expanded && data.type !== 3,
                  'el-icon-circle-plus-outline':
                    !node.expanded && data.type === 2,
                  'el-icon-remove-outline': node.expanded && data.type === 2,
                }"
                style="color: #419eff"
              />

              <span>{{ node.label }}</span>
            </template>
          </span>
        </el-tree>
      </el-card>
    </div>
    <div class="right">
      <el-card>
        <div slot="header" class="clearfix">
          <span>作业范围</span>
          <el-button style="float: right" type="primary" size="medium"
            >编辑</el-button
          >
        </div>
        <div class="searchMap">
          <div class="keyWord">
            <span>地区关键词：</span>
            <el-input
              placeholder="请输入地区关键词"
              style="width: 240px"
            ></el-input>
          </div>
          <div class="map">
            <template>
              <el-row id="map" style="height: 712px; margin-top: 10px">
                <baidu-map class="bm-view" @ready="init"></baidu-map>
              </el-row>
            </template>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getTreeListApi } from "@/api/organization-manage";

export default {
  name: "InstitutionsPage",
  data() {
    return {
      employeeList: [],
      treeData: [],
      defaultKeys: ["1024984540818568481"],
      defaultProps: {
        label: "name",
        children: "children",
      },
      params: {
        agencyId: "1024985129287809409",
        page: 1,
        pageSize: 5,
      },
    };
  },
  created() {
    this.getTreeList();
  },
  methods: {
    async getTreeList() {
      const { data: res } = await getTreeListApi();
      // console.log(res);
      this.treeData = JSON.parse(res);
      console.log(this.treeData);
    },
    handleNodeClick(data, node) {
      console.log(data);
      console.log(node);
      this.params.agencyId = data.id;
    },
    async init(longitude, latitude) {
      const BMap = window.BMap;
      const map = new BMap.Map("map");
      const point = new BMap.Point(longitude, latitude); // 设置城市经纬度坐标
      map.centerAndZoom(point, 1);
      map.enableScrollWheelZoom(true); // 鼠标滚动缩放
      this.polygon = this.polygon.map((item) => {
        return new BMap.Point(item.longitude, item.latitude);
      });
      // console.log(this.polygon);
      const view = map.getViewport(this.polygon); // 获取所有坐标中心点以及缩放比例
      map.setCenter(view.center); // 设置中心点
      map.setZoom(view.zoom); // 设置缩放比例  map.setZoom(view.zoom - 1)
      // 绘制面
      const polygon = new BMap.Polygon(this.polygon, {
        strokeColor: "#e85552", //颜色
        strokeWeight: 1, //粗细
        strokeOpacity: 0.5, //透明度
        strokeStyle: "dashed", //虚线
        fillColor: "rgba(232, 85, 82, 0.3)",
      });
      map.addOverlay(polygon);
      const local = new BMap.LocalSearch(map, {
        renderOptions: { map: map },
      });
      local.search(this.search);
    },
  },
};
</script>

<style lang="scss" scoped>
.jobsAreaPage {
  display: flex;
  .left {
    width: 205px;
    height: auto;
    margin-right: 20px;
    //设置这个属性不会被挤压
    flex-shrink: 0;
    ::v-deep .el-card__body {
      height: 790px;
      background-color: white;
      .el-tree {
        //height: 100vh;
        .is-current {
          background: unset;
          color: #ff7a63;
        }
        .el-tree-node__content {
          margin-bottom: 10px;
        }
      }
    }
  }
  .right {
    box-sizing: border-box;
    width: 100%;
    height: 100vh;
    //background-color: skyblue;
    ::v-deep .el-card__header {
      background-color: #fafafa;
      height: 60px;
    }
    .keyWord {
      margin-bottom: 20px;
    }
    .map {
      min-width: 827px;
      min-height: 668px;
      background: lightblue;
    }
  }
}
</style>
